<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思维导图</title>
    <script src="./jquery.min.js"></script>
    <script src="./html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 9999999px;
            overflow-x: auto;
        }

        .elecen {
            vertical-align: top;
            display: inline-block;
            text-align: center;
        }

        .boss {
            display: block;
            position: relative;
        }

        .bossempty::before {
            content: '';
            width: 100%;
            height: 20px;
            background-color: #fff;
            position: absolute;
            top: 40px;
            left: 0;
        }

        .eleitem {
            display: inline-block;
            vertical-align: top;
            min-width: 100px;
            padding: 0 10px;
            background-color: #fff;
            height: 40px;
            border: 1px #000 solid;
            text-align: center;
            line-height: 40px;
            margin: 0 10px;
            margin-bottom: 36px;
            position: relative;
            box-sizing: border-box;
        }

        .eleitem::after {
            content: '';
            width: 2px;
            height: 76px;
            background-color: #000;
            position: absolute;
            bottom: -20px;
            left: 50%;
            margin-left: -1px;
            z-index: -9;
        }

        .eleitem::before {
            content: '';
            /* width: 100px; */
            height: 20px;
            border-width: 2px 0 0 0;
            box-sizing: border-box;
            border-color: #000;
            /* border-left-width: 0; */
            border-bottom-width: 0;
            border-style: solid;
            position: absolute;
            top: -20px;
            /* right: 50%;
            margin-right: -1px; */
        }
    </style>
</head>

<body>
</body>
<script>
    let arr = []
    let fn = (data, num, id) => {
        let str = ''
        data.forEach((item, index) => {
            str += '<div class="elecen">'
            str += `<div class="boss ${item.children && item.children.length > 0 ? '' : 'bossempty'}">`
            item.namelist.forEach((it, inde) => {
                str += `<div class="eleitem">${it.name}</div>`
            })
            str += '</div>'
            if (item.children && item.children.length > 0) {
                str += fn(item.children)
            }
            str += '</div>'
        })
        return str
    }
    // 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();
    // 打开连接
    xhr.open('GET', './index.json', true);
    // 发送请求
    xhr.send();
    // 处理响应
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            // 在这里对获取到的 JSON 数据进行处理
            $('body').append(fn([data]))
            setTimeout(() => {
                let width = 0
                $('body>.elecen>.elecen').each(function () {
                    width += $(this).width()
                })
                $('body').width(width + 'px')

                let str = '<style>'
                $('.eleitem').each(function (a) {
                    let father = $(this).parent().parent().siblings('.boss').children('.eleitem')
                    let son = $(this)
                    if (father.offset()) {
                        let num = (son.width() / 2 - father.width() / 2) / 2
                        let fatheroff = father.offset()
                        let sonroff = son.offset()
                        let fatherleft = fatheroff.left
                        let sonleft = sonroff.left
                        $(this).addClass('fake' + a)
                        // siblings('.elecen')
                        if (a == 233) {
                            // console.log(son.parent().parent());
                            // console.log(father);
                        }
                        let isconnect=son.parent().parent().siblings('.elecen').length==0&&father.length==1&&son.siblings('.eleitem').length==0?false:true
                        if (father.length > 1) {
                            if (fatherleft > sonleft) {
                                str += `.fake${a}::before{width: ${2 * (fatherleft - sonleft + num)}px;left:50%;margin-left:-${fatherleft - sonleft + num + 1}px;display:${isconnect ? 'block' : 'none'};}`
                            } else {
                                str += `.fake${a}::before{width: ${2 * (sonleft - fatherleft + num)}px;right:50%;margin-right:-${sonleft - fatherleft + num + 1}px;display:${isconnect ? 'block' : 'none'};}`
                            }
                        } else {
                            if (fatherleft > sonleft) {
                                str += `.fake${a}::before{width: ${fatherleft - sonleft + Math.abs(num)}px;left:50%;margin-left:-1px;display:${isconnect ? 'block' : 'none'};}`
                            } else {
                                str += `.fake${a}::before{width: ${sonleft - fatherleft + Math.abs(num)}px;right:50%;margin-right:-1px;display:${isconnect ? 'block' : 'none'};}`
                            }
                        }
                    }
                })

                str += '</style>'
                $('head').append(str)
                setTimeout(() => {
                    html2canvas(document.querySelector('body')).then((canvas) => {
                        const a = document.createElement('a');
                        a.href = canvas.toDataURL('image/png');
                        a.download = 'screenshot.png';
                        a.click();
                    }).catch((err) => {

                    });
                })
            })
        }
    };
</script>

</html>